import { useState, memo } from 'react'
import StudentInfoForm from './StudentInfoForm'
import StudentInfoTable from './StudentInfoTable'

function App () {
  const MemoStudentInfoForm = memo(StudentInfoForm)
  const MemoStudentInfoTable = memo(StudentInfoTable)
  const [studentState, setStudentState] = useState([
    {
      number: '01',
      name: '张三',
      sex: '男',
      age: 10,
      date: '2020-12-04',
      hobbies: ['足球', '篮球'],
      subject: '大前端'
    },
    {
      number: '02',
      name: '李四',
      sex: '男',
      age: 20,
      date: '2030-12-05',
      hobbies: ['足球', '橄榄球'],
      subject: 'Java'
    }
  ])
  // 添加学生信息
  function addStudentInfo (student) {
    // console.log('添加学生信息回调执行了')
    // console.log(student, setStudentState)
    setStudentState([...studentState, student])
  }
  // 删除学生信息
  function deleteStudentInfo (index) {
    const students = JSON.parse(JSON.stringify(studentState))
    students.splice(index, 1)
    setStudentState(students)
  }
  // 添加学生信息
  return (
    <div className='container'>
      <div className='col-md-12'>
        <h3 className='title'>学生信息管理</h3>
      </div>
      <MemoStudentInfoForm handler={addStudentInfo}></MemoStudentInfoForm>
      <MemoStudentInfoTable
        studentList={studentState}
        handler={deleteStudentInfo}
      ></MemoStudentInfoTable>
    </div>
  )
}

export default App
